<template>
    <div class="home">
        <!-- tab 标签栏 -->
        <van-tabs @click="onClick">
            <van-tab
                v-for="item in typeList"
                :name="item.id"
                :title="item.name"
                :key="item.id"
            >
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <div v-for="item in list" class="list-item" :key="item.id">
                        <h3>{{ item.title }}</h3>
                        <!-- 最多显示三行 -->
                        <div class="van-multi-ellipsis--l3">
                            {{ item.content }}
                        </div>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import axios from "axios";
export default {
    async created() {
        const res = await axios.get("/questions/types");
        this.typeList = res.data.data;
        this.getListByTid(1);
    },
    data() {
        return {
            typeList: [],
            loading: false,
            finished: false,
            list: [],
        };
    },
    methods: {
        async getListByTid(tid) {
            const res = await axios.get("/questions", {
                params: { tid },
            });
            this.list = res.data.data;
        },
        onLoad() {
            console.log("记载更多");
        },
        onClick(name) {
            // console.log(name, title);
            this.getListByTid(name);
        },
    },
};
</script>

<style lang="less" scoped>
.home {
    min-height: 100vh;
    height: 100%;
    background-color: #f1f1f1;

    .list-item {
        background-color: #fff;
        padding: 10px;
        margin-bottom: 15px;
    }
}
</style>
